.dice {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    perspective: 500px;
}
.info {
    position: absolute;
    left: 30px;
    top: 0;
}
.box {
    position: relative;
    transform-style: preserve-3d;
    width: 100px;
    height: 100px;
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
    & > div {
        transform-style: preserve-3d;
    }
}
// 面
.aspect {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 15px;
}
.inner .aspect {
    background: rgb(112, 112, 112);
}
.outer .aspect {
    background-color: black;
    box-shadow: #d2d2d2 0px 0px 10px 0px inset;
}
// 点数
.dot {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
// 第1面
.aspect:nth-child(1) {
    transform: translateZ(50px);
    .dot {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: red;
    }
}
// 第2面
.aspect:nth-child(2) {
    transform: rotateX(-180deg) translateZ(50px);
    .dot {
        background: orange;
        &:nth-child(1) {
            left: 25%;
            top: 25%;
        }
        &:nth-child(2) {
            right: 25%;
            bottom: 25%;
        }
    }
}
// 第3面
.aspect:nth-child(3) {
    transform: rotateX(90deg) translateZ(50px);
    .dot {
        background: yellow;
        &:nth-child(1) {
            left: 15%;
            top: 15%;
        }
        &:nth-child(2) {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        &:nth-child(3) {
            right: 15%;
            bottom: 15%;
        }
    }
}
// 第4面
.aspect:nth-child(4) {
    transform: rotateX(-90deg) translateZ(50px);
    .dot {
        background: green;
        &:nth-child(1) {
            left: 20%;
            top: 20%;
        }
        &:nth-child(2) {
            left: 20%;
            bottom: 20%;
        }
        &:nth-child(3) {
            right: 20%;
            top: 20%;
        }
        &:nth-child(4) {
            right: 20%;
            bottom: 20%;
        }
    }
}
// 第5面
.aspect:nth-child(5) {
    transform: rotateY(90deg) translateZ(50px);
    .dot {
        background: greenyellow;
        &:nth-child(1) {
            left: 15%;
            top: 15%;
        }
        &:nth-child(2) {
            left: 15%;
            bottom: 15%;
        }
        &:nth-child(3) {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        &:nth-child(4) {
            right: 15%;
            top: 15%;
        }
        &:nth-child(5) {
            right: 15%;
            bottom: 15%;
        }
    }
}
// 第6面
.aspect:nth-child(6) {
    transform: rotateY(-90deg) translateZ(50px);
    .dot {
        background: purple;
        &:nth-child(1) {
            left: 20%;
            top: 15%;
        }
        &:nth-child(2) {
            left: 20%;
            bottom: 15%;
        }
        &:nth-child(3) {
            left: 20%;
            top: 50%;
            margin-top: -10px;
        }
        &:nth-child(4) {
            right: 20%;
            top: 15%;
        }
        &:nth-child(5) {
            right: 20%;
            top: 50%;
            margin-top: -10px;
        }
        &:nth-child(6) {
            right: 20%;
            bottom: 15%;
        }
    }
}
.cover {
    position: absolute;
    width: 98px;
    height: 98px;
    left: 1px;
    right: 1px;
    background: rgb(112, 112, 112);
    &:nth-child(1) {
        transform: rotateY(90deg);
    }
    &:nth-child(2) {
        transform: rotateX(90deg);
    }
}

.rolling {
    animation: roll infinite 10s;
}
@keyframes roll {
    0% {
        transform: rotate3d(1, 1, 1, 0deg) rotateY(0deg) scale3d(0.5, 0.5, 0.5);
    }
    50% {
        transform: rotate3d(1, 1, 1, 360deg) rotateY(360deg) scale3d(1, 1, 1);
    }
    100% {
        transform: rotate3d(1, 1, 1, 720deg) rotateY(720deg) scale3d(0.5, 0.5, 0.5);
    }
}

/* 投掷筛子 */
@mixin run($x, $y, $z, $r) {
    transform: rotateX(calc(#{$x} + #{$r} * 360deg)) rotateY(calc(#{$y} + #{$r} * 360deg))
        rotateZ(calc(#{$z} + #{$r} * 360deg));
}
/* 点数1 */
.run_1 {
    @include run(40deg, 0deg, 60deg, 0);
    &.run_big {
        @include run(40deg, 0deg, 60deg, 7);
    }
}
/* 点数2 */
.run_2 {
    @include run(220deg, 0deg, -60deg, 0);
    &.run_big {
        @include run(220deg, 0, -60deg, 7);
    }
}
/* 点数3 */
.run_3 {
    @include run(-50deg, -60deg, 0deg, 0);
    &.run_big {
        @include run(-50deg, -60deg, 0deg, 7);
    }
}
/* 点数4 */
.run_4 {
    @include run(130deg, 60deg, 0deg, 0);
    &.run_big {
        @include run(130deg, 60deg, 0deg, 7);
    }
}
/* 点数5 */
.run_5 {
    @include run(130deg, 60deg, 90deg, 0);
    &.run_big {
        @include run(130deg, 60deg, 90deg, 7);
    }
}
/* 点数6 */
.run_6 {
    @include run(130deg, 60deg, -90deg, 0);
    &.run_big {
        @include run(130deg, 60deg, -90deg, 7);
    }
}
